<!-- 歌单歌曲列表 -->
<template>
	<div class="songslist">
		<SongsListHeader v-if="flag" :songList="infoList.res.playlist"></SongsListHeader>
		<SongsListContent v-if="flag" :songList="infoList.res.playlist"></SongsListContent>
	</div>
</template>


<script lang="ts" setup>
import router from '@/router/index'
import { onMounted, ref } from 'vue';
import { getResourceDetailApi } from '@/api/songs'
import SongsListHeader from './songsListHeader.vue'
import SongsListContent from './songsListContent.vue'

let resourceId = ref('')
let infoList = ref({})
let flag = ref(false)

const getId = async() => {
	resourceId.value = router.currentRoute.value.query.id as string
	const res = await getResourceDetailApi(router.currentRoute.value.query.id as unknown as number)
	console.log('列表',res);
	infoList.value = { res }
	flag.value = true
}

onMounted(() => {
	getId()
})

</script>

<style lang="scss">
.songslist {
	padding: 2.5vw 2vw 0;
}
	
</style>